// 引入封装好的ajax文件
import ajax from '../basic/ajax.js'


//渲染**判断本地
let dataArr = []
if (localStorage.getItem('dataArr')) {
    //有数据的时候，先获取到
    dataArr = JSON.parse(localStorage.getItem('dataArr'))
        //拿获取到的东西渲染
    renderData(dataArr)
} else {
    ajax({
        url: 'https://api.iynn.cn/mock?t=2'
    }).then(res => {
        console.log(res)
        if (res.code == 0) {
            //获取json中的数据
            dataArr = res.data
                //第一先给存到本地存储中
            localStorage.setItem('dataArr', JSON.stringify(dataArr))
                //第二还要用它渲染
            renderData(dataArr)
        }
    })
}
//渲染函数
function renderData(arr) {
    let str = ''
    arr.forEach((item, index) => {
        str += `<tr>
                    <td>${index+1}</td>
                    <td>${item.title}</td>
                    <td>${item.user}</td>
                    <td>${item.date}</td>
                    <td>
                        <button type="button" class="btn btn-danger del" id="${index}">删除</button>
                        <button type="button" class="btn btn-success" id="${index}">编辑</button>
                    </td>
                </tr>`
    })
    document.querySelector('tbody').innerHTML = str
}


//02-模态框-添加/编辑
document.querySelector('body').onclick = (e) => {

    //编辑
    if (e.target.innerText == '编辑') {
        // 弹出模态框
        $('#myModal').modal('show');

        //数据回填
        document.querySelector('.Model_title').value = dataArr[e.target.id].title
        document.querySelector('.Model_per').value = dataArr[e.target.id].user
        document.querySelector('.Model_date').value = dataArr[e.target.id].date

        document.querySelector('.sure').onclick = () => {
            //模态框再隐藏
            $('#myModal').modal('hide')
                //数据更新
            dataArr[e.target.id].title = document.querySelector('.Model_title').value
            dataArr[e.target.id].user = document.querySelector('.Model_per').value
            dataArr[e.target.id].date = document.querySelector('.Model_date').value
            localStorage.setItem('dataArr', JSON.stringify(dataArr))
            renderData(dataArr)
        }
    }

    //删除
    if (e.target.innerText == '删除') {
        console.log(e.target.id)
            //获取相应的id
        let newId = e.target.id
            //将数组中这个id对应的对象删除
        dataArr.splice(e.target.id, 1)
            //重新渲染
        localStorage.setItem('dataArr', JSON.stringify(dataArr))
        renderData(dataArr)
    }
}



//新增
document.querySelector('#add').onclick = () => { //有问题，如果没有数据填入呢，创建了一个空白的行
    if (document.querySelector('.addTitle').value) {
        dataArr.push({
                "id": Number(dataArr[dataArr.length - 1].id) + 1, //很重要，容易迷糊
                "title": document.querySelector('.addTitle').value, //标题
                "user": document.querySelector('.addTitlePer').value, //发布人
                "date": document.querySelector('.addTitleDate').value, //日期
            })
            // 更新本地缓存
        localStorage.setItem('dataArr', JSON.stringify(dataArr))
            // 重新渲染
        renderData(dataArr)
    }
    document.querySelector('.addTitle').value = ''
    document.querySelector('.addTitlePer').value = ''
    document.querySelector('.addTitleDate').value = ''

}